<template>
  <el-dialog
    :title="title +'提交'"
    class="formData"
    :visible.sync="dialogExamineFormVisible"
    width="50%"
    top="5vh"
    :before-close="close"
  >
    <div slot="title" class="dialog-title">
      <!-- <slot name="tab-select"></slot> -->
      <span class="title" :class="titlebtnINdex === 1 ? 'titleone': 'titletwo'" @click="titlebtn(1)">
        {{ title +'提交' }}
      </span>
      <span class="title" :class="titlebtnINdex === 2 ? 'titleone': 'titletwo'" @click="titlebtn(2)">
        {{ title +'提交历史' }}
      </span>
    </div>
    <div v-if="titlebtnINdex === 1" class="dialog-body">
      <slot name="form"></slot>
      <div class="btn dialog-footer">
        <slot name="btn"></slot>
      </div>
    </div>
    <div v-if="titlebtnINdex === 2" class="dialog-body">
      <slot name="table"></slot>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="zh-button-one" @click="close">关 闭</el-button>
      <!-- <el-button type="primary" @click="savemes">保 存</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    // default
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      titlebtnINdex: 1,
      dialogExamineFormVisible: false
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogExamineFormVisible = val
      }
    }
  },
  methods: {
    titlebtn(e) {
      this.titlebtnINdex = e
      this.$emit('titlebtn', e)
    },
    savemes() {},
    close() {
      this.dialogExamineFormVisible = false
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: inline-block;
  color: #fffff0;
  padding: 3px 10px;
  text-align: center;
  border:  1px solid #fffff0;
  margin-right: 10px;
  font-size: 16px;
  border-radius: 4px;
  font-weight: normal;
  &:hover {
    background-image: linear-gradient(#0fa1d2,#1087af,#106f8f);
    border: #f6f9f9 1px solid;
    // background: #64d9d6;
    cursor: pointer;
  }
}
::v-deep {
  .el-dialog__body {
    padding: 0;
  }
  .el-input-number--medium {
    width: 100%;
  }
}
.dialog-body {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding: 40px 15px 35px 15px;
  .btn {
    background-color: initial !important;
    position: absolute;
    bottom: 5px;
    right: 15px;
  }
}
.titleone {
    height: 30px;
    line-height: 21px;
    text-align: center;
    // background-color: transparent;
    background-image: linear-gradient(#0fa1d2,#1087af,#106f8f);
    border: #f6f9f9 1px solid;
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
}
.titletwo {
    height: 30px;
    line-height: 21px;
    text-align: center;
    background-color: #106986;
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
}
</style>
